{% extends "static/view/template.html" %}
{% block body %}
<style>
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    background: #f44c0e;
}
</style>
<div class="container">

	<div class="page-header">
	</div>

	<div class="page-header">
        <h1> <font color= #333333><center>App Folder</center></font>
			<small><center><font color= #778899>View your app folder online</font></center></small>
		</h1>
	</div>

</div>

Current directory:
<ol class="breadcrumb">
    <li><a href="?working_dir=&root_dir={{ROOT_DIR}}">root</a></li>
    {% for dir in DIR_LIST %}<li><a href="?working_dir={{dir.path}}&root_dir={{ROOT_DIR}}">{{dir.name}}</a></li>{% endfor %}
</ol>
File listing:
<ol class="breadcrumb">
    {% for filefolder in FILEFOLDERS %}<li><a href="?working_dir={{WORKING_DIR}}{% if WORKING_DIR!='' %}/{% endif %}{{filefolder}}&root_dir={{ROOT_DIR}}">{{filefolder}}</a></li>{% endfor %}
    {% for file in FILES %}<li><a href="{{ROOT_DIR}}/{{WORKING_DIR}}/{{file}}" download>{{file}}</a></li>{% endfor %}
    <li><a href="?working_dir={% if DIR_LIST|length>1 %}{{DIR_LIST[-2].path}}{% else %}{% endif %}&root_dir={{ROOT_DIR}}">..</a></li>
</ol>

<form name="fileForm" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
    <div class="row">
        <div class="col-xs-12">
            Upload files to : app/{% for dir in DIR_LIST %}{{dir.name}}/{% endfor %}
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <input type="text" name="file_name">
            <div class="fileUpload btn btn-warning"><span>Select Package</span><input type="file" name="fileToUpload" id="fileToUpload"  class="upload"></div>
            <div class="fileUpload btn btn-success"><span>Submit</span><input type="submit" value="Upload" name="submit"  class="upload"></div>
        </div>
    </div>
</form>

<script>
 document.forms["fileForm"]["fileToUpload"].onchange = AutoFill;

function AutoFill() {
    document.forms["fileForm"]["file_name"].value = document.forms["fileForm"]["fileToUpload"].value.replace(/^.*[\\\/]/, '');
}

function validateForm() {
    var fileToUpload = document.forms["fileForm"]["fileToUpload"].value;
    var file_name = document.forms["fileForm"]["file_name"].value;
    if (fileToUpload == null || fileToUpload == "") {
        alert("You must choose a file to upload");
        return false;
    }
    if (file_name == null || file_name == "") {
        document.forms["fileForm"]["file_name"].value = fileToUpload.replace(/^.*[\\\/]/, '');
    }
    return true;
}
</script>
{% if RESPONSE=='success' %}
<div class="alert alert-warning" role="alert">Upload succeeded!</div>
{% elif RESPONSE=='fail' %}
<div class="alert alert-danger" role="alert">Upload failed!</div>
{% endif %}

{% endblock %}
